<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
    动态组件切换时会有卸载的操作。有时我们期望组件切换的话不要卸载而是缓存。这时就需要使用 KeepAlive

    KeepAlive:
        1. 是 Vue 中内置的组件
        2. 作用：就是将包裹的组件做缓存，当被包裹组件v-if为false时不会卸载。
        3. 语法：
          <KeepAlive>
            <组件 />
          </KeepAlive>

    被缓存组件的特点：
          1. 当组件不可见时，不会触发卸载，当组件再次可见时，不会重新触发创建
          2. 观察 VueDevtools 查看组件是否被缓存
          3. 组件重新可见时，不会重新创建，那么数据也就不会重新来。
          4. 会多出两个生命周期的钩子函数
              1. activated          激活，可见
                1. 默认会触发一次，后续组件重新可见会再次触发
                2. 应用场景：类似与mounted做全局事件绑定、计时器、消息订阅等工作
              2. deactivated        失活，不可见
                1. 不可见时触发
                2. 应用场景：类似于卸载做清理收尾的工作

    KeepAlive 的 props：
          1. include    包含
            可以通过设置 include 来具体描述哪些组件需要被缓存。
          2. exclude    排除
            可以通过设置 exclude 来具体描述哪些组件不需要被缓存。
          3. max
            设置最大可缓存的组件实例个数，是个数字

    include与exclude的语法：
          1. 字符串语法：通过逗号分割多个组件的名字 
            include="a, b"
          2. 正则表达式语法
            :include="/a|b/"
          3. 数组语法
            :include="['a', 'b']"
   -->

    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            tabs: [
              { id: 1, name: "Home" },
              { id: 2, name: "About" },
              { id: 3, name: "Contact" },
            ],
            curTabName: "Home", // 用于表示当前高亮的TabName
          };
        },

        template: `
          <div>
            <button 
              v-for="tab in tabs" 
              :class="{ active: tab.name === curTabName }"
              @click="curTabName = tab.name"
              >
              {{ tab.name }}
            </button>
            <hr />

            <!-- 
            <keep-alive>
              <Home v-if="curTabName === 'Home'" />
              <About v-else-if="curTabName === 'About'" />
              <Contact v-else-if="curTabName === 'Contact'" />
            </keep-alive>
            -->

            <!-- 三个组件都被缓存 -->
           
            <KeepAlive>
              <component :is="curTabName" />  
            </KeepAlive>
            

            <!-- 只缓存 Home 与 About -->
            <!--
            <KeepAlive include="Home,About"> 
              <component :is="curTabName" />  
            </KeepAlive>
            -->

            <!-- 设置最大缓存 2个 组件实例 -->
            <!--
            <KeepAlive :max="2"> 
              <component :is="curTabName" />  
            </KeepAlive>
            -->
            
          </div>
        `,
      });

      // 分别创建三个组件
      app.component("Home", {
        name: "Home",
        data() {
          return {
            count: 1,
          };
        },
        template: `
          <div>
            <h1>首页</h1>
            <button @click="count++">{{ count }}</button>
          </div>
        `,
        mounted() {
          console.log("Home mounted");
        },
        unmounted() {
          console.log("Home unmounted");
        },
        activated() {
          console.log("Home activated");

          this.timer = setInterval(() => {
            console.log("home 计时器");
          }, 1000);
        },
        deactivated() {
          console.log("Home deactivated");

          clearInterval(this.timer);
        },
      });
      app.component("About", {
        name: "About",
        data() {
          return {
            value: "",
          };
        },
        template: `
          <div>
            <h1>关于页面</h1>
            <input type="text" v-model="value" />
          </div>
        `,
        mounted() {
          console.log("About mounted");
        },
        unmounted() {
          console.log("About unmounted");
        },
      });
      app.component("Contact", {
        name: "Contact",
        data() {
          return {
            list: ["Apple", "Banana"],
          };
        },
        template: `
          <div>
            <h1>联系我们</h1>
            <button @click="list.push('Orange')">添加橘子</button>
            <hr />
            <ul>
              <li v-for="item in list">{{ item }}</li>  
            </ul>
          </div>
        `,
        mounted() {
          console.log("Contact mounted");
        },
        unmounted() {
          console.log("Contact unmounted");
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
